
//  更多按钮
$(function () {
    document.movies = $('#movies').children(".movie-container");
    document.movie_index = 3;
    document.step = 4;
    console.log(document.movies.length);
})
getMore = () => {
    if (document.movie_index == document.movies.length) {
        layer.msg('没有更多视频啦');
    } else {
        for (let i = document.movie_index; i < document.movie_index + 1 + document.step; i++) {
            $(document.movies[i]).css({
                'display': 'flex',
            });
            setTimeout(() => {
                $(document.movies[i]).css({
                    'opacity': '1',
                    'max-height': '400px',
                });
            }, 500)
        }
    }
    document.movie_index = document.movie_index + document.step > document.movies.length ? document.movies
        .length : document.movie_index + document.step;
    console.log(document.movie_index)
}

// 

$(function () {
    $('.movie_img_box').hover(function () {
        $(this).children('.movie_img_btn').css('width', '100px');
        $(this).children('.movie_img_btn').css('height', '100px');
        $(this).children('.movie_img_backcolor').css('width', '100%');
        $(this).children('.movie_img_backcolor').css('height', '100%');
    }, function () {
        $(this).children('.movie_img_btn').css('width', '0');
        $(this).children('.movie_img_btn').css('height', '0');
        $(this).children('.movie_img_backcolor').css('width', '0');
        $(this).children('.movie_img_backcolor').css('height', '0');
    })
})
$(function () {
    $('.hot-box2').hover(function () {
        $(this).children('.movie_img_btn').css('width', '50px');
        $(this).children('.movie_img_btn').css('height', '50px');
        $(this).children('.movie_img_backcolor').css('width', '100%');
        $(this).children('.movie_img_backcolor').css('height', '100%');
    }, function () {
        $(this).children('.movie_img_btn').css('width', '0');
        $(this).children('.movie_img_btn').css('height', '0');
        $(this).children('.movie_img_backcolor').css('width', '0');
        $(this).children('.movie_img_backcolor').css('height', '0');
    })
})

$(function () {
    $('.top-box').hover(function () {
        $(this).children('.movie_img_btn').css('width', '70px');
        $(this).children('.movie_img_btn').css('height', '70px');
        $(this).children('.movie_img_backcolor').css('width', '100%');
        $(this).children('.movie_img_backcolor').css('height', '100%');
    }, function () {
        $(this).children('.movie_img_btn').css('width', '0');
        $(this).children('.movie_img_btn').css('height', '0');
        $(this).children('.movie_img_backcolor').css('width', '0');
        $(this).children('.movie_img_backcolor').css('height', '0');
    })
})

playvedio = (mov, id) => {
    let offsetHeight = window.innerHeight / 2 - 576 / 2;
    console.log(offsetHeight);
    layui.use("layer", () => {
        let layer = layui.layer;
        layer.msg('点击任意处关闭');
        layer.open({
            type: 2,
            title: false,
            area: ['1010px', '576px'],
            shade: 0.8,
            closeBtn: 1,
            offset: offsetHeight,
            shadeClose: true,
            content: mov
        });
        layer.msg('点击任意处关闭');
    })
}

/* 轮播栏 */
var timeout = null;
window.onload = function () {
    var oLeft = document.querySelector('.left');
    var oRight = document.querySelector('.right');
    var oButton = document.querySelector('.buttons');
    var oButtons = document.querySelectorAll('.buttons div');
    var oImgs = document.querySelectorAll('.box img');
    var imgWidth = oImgs[0].width;
    var gIndex = 0;
    begainAnimate();

    // 绑定左右点击事件
    oLeft.onclick = function () {
        clearTimeout(timeout);
        leftMove();
        begainAnimate();
    };
    oRight.onclick = function () {
        clearTimeout(timeout);
        rightMove();
        begainAnimate();
    };
    // 绑定数字序号事件
    oButton.onclick = function (event) {
        clearTimeout(timeout);
        var targetEl = event.target;
        var nextIndex = Number($(targetEl).attr('i'));
        rightMove(nextIndex);
        begainAnimate();
    }
    // 默认初始动画朝右边
    function begainAnimate() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            rightMove();
            begainAnimate();
        }, 3000);
    }
    // 向左移动动画
    function leftMove() {
        var nextIndex = (gIndex - 1 < 0) ? oImgs.length - 1 : gIndex - 1;
        animateSteps(nextIndex, -50);
    }
    // 向右移动动画
    function rightMove(nextIndex) {
        if (nextIndex == undefined) {
            nextIndex = (gIndex + 1 >= oImgs.length) ? 0 : gIndex + 1;
        }
        animateSteps(nextIndex, 50);
    }
    // 一次动画
    function animateSteps(nextIndex, timestamp) {
        var currentImg = oImgs[gIndex];
        var nextImg = oImgs[nextIndex];
        nextImg.style.zIndex = 10;
        var step = 0;
        requestAnimationFrame(goStep);
        // 走一帧的动画，移动timestamp
        function goStep() {
            var moveWidth = timestamp * step++;
            if (Math.abs(moveWidth) < imgWidth) {
                currentImg.style.transform = `translate(${moveWidth}px)`;
                nextImg.style.transform = `translate(${moveWidth > 0 ? (moveWidth - imgWidth) : (imgWidth + moveWidth)}px)`;
                requestAnimationFrame(goStep);
            } else {
                currentImg.style.zIndex = 1;
                currentImg.style.transform = `translate(0px)`;
                nextImg.style.transform = `translate(0px)`;
                oButtons[gIndex].setAttribute('class', '');
                oButtons[nextIndex].setAttribute('class', 'active');
                gIndex = nextIndex;
            }
        }
    }
}
window.onclose = function () {
    clearTimeout(timeout);
}
// END